/**
 * 基础布局组件
 */

import React, { useMemo, Fragment } from 'react'
import { Link, connect } from 'umi'
import { Button, Result } from 'antd'
import ProLayout, { DefaultFooter } from '@ant-design/pro-layout'
import { createFromIconfontCN } from '@ant-design/icons'
import RenderAuthorize from '@/components/Authorized'
import { getRouteAuthority, getAuthorityFromRouter } from '@/utils'
import RightContent from '@/components/GlobalHeader/RightContent'
import logo from '../assets/logo.svg'
import defaultSettings from '../../config/defaultSettings'
import '../themes/index.less'

createFromIconfontCN({ scriptUrl: defaultSettings.iconfontUrl })

const noMatch = (
  <Result
    status={403}
    title="403"
    subTitle="没有权限访问该页面!"
    extra={
      <Button type="primary">
        <Link to="/login">返回首页</Link>
      </Button>
    }
  />
)

/**
 * 底部
 */
const defaultFooterDom = (
  <DefaultFooter copyright="2020 千秋里后台管理系统" links={[]} />
)

const BasicLayout = props => {
  const { dispatch, children, route = {}, location = {}, global = {} } = props
  const { routes = [] } = route
  const { authority, collapsed } = global
  const Authorized = useMemo(() => RenderAuthorize(authority), [authority])

  /**
   * 使用Authorized校验所有菜单
   * @param menuList
   * @returns {*}
   */
  const menuDataRender = menuList => {
    return menuList.map(item => {
      const localItem = {
        ...item,
        children: item.children ? menuDataRender(item.children) : [],
      }
      return Authorized.check(item.authority, localItem, null)
    })
  }

  /**
   * 菜单缩放
   */
  const handleMenuCollapse = collapsed => {
    if (dispatch) {
      dispatch({
        type: 'global/changeLayoutCollapsed',
        payload: {
          collapsed,
        },
      })
    }
  }

  // 单签菜单授权数据
  const authorized = getAuthorityFromRouter(
    routes,
    location.pathname || '/'
  ) || {
    authority: undefined,
  }

  return (
    <Fragment>
      <ProLayout
        title="千秋里"
        logo={logo}
        siderWidth={180}
        fixedHeader={true}
        fixSiderbar={true}
        collapsed={collapsed}
        onCollapse={handleMenuCollapse}
        menuHeaderRender={(logoDom, titleDom) => (
          <Link to="/">
            {logoDom}
            {titleDom}
          </Link>
        )}
        menuDataRender={menus => menuDataRender(menus)}
        menuItemRender={(menuItemProps, defaultDom) => {
          if (menuItemProps.isUrl || !menuItemProps.path) {
            return defaultDom
          }
          return <Link to={menuItemProps.path}>{defaultDom}</Link>
        }}
        breadcrumbRender={(routers = []) => routers}
        itemRender={(route, params, routes, paths) => {
          const first = routes.indexOf(route) === 0
          return first ? (
            <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
          ) : (
            <span>{route.breadcrumbName}</span>
          )
        }}
        // footerRender={() => defaultFooterDom}
        rightContentRender={() => <RightContent />}
        {...props}
      >
        <Authorized authority={authorized.authority} noMatch={noMatch}>
          {children}
        </Authorized>
      </ProLayout>
    </Fragment>
  )
}

export default connect(({ global }) => ({ global }))(BasicLayout)
